<template>
  <div class="swipers">
    <swiper :modules="modules" :pagination="{ clickable: true }">
      <swiper-slide v-for="(item, index) in swiperlist" :key="index">
        <img :src="item.imgurl" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

// import swiper module styles
import "swiper/css";
import "swiper/css/pagination";
// more module style...

export default {
  name: "MySwiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      modules: [Pagination],
      swiperlist: [
        { id: 1, imgurl: "./images/swiper1.jpeg" },
        { id: 2, imgurl: "./images/swiper2.jpeg" },
        { id: 3, imgurl: "./images/swiper3.jpeg" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.swipers {
  margin-top: 54px;
  img {
    width: 100%;
  }
}
</style>